<template>
	<div class="login-container clearfix" :style="{backgroundImage: 'url(' + loginBg + ')' }">
		<div class="login-warpper">
			<div class="_banner fl">
				<el-carousel indicator-position="none" height="630px" arrow="never" class="_carousel_warpper">
					<el-carousel-item >
						<img src="@/assets/login/1-1.jpg" alt="图片">
					</el-carousel-item>
					<el-carousel-item  >
						<img src="@/assets/login/1-2.jpg" alt="图片">
					</el-carousel-item>
					<el-carousel-item >
						<img src="@/assets/login/1-3.jpg" alt="图片">
					</el-carousel-item>
					<el-carousel-item >
						<img src="@/assets/login/1-4.jpg" alt="图片">
					</el-carousel-item>
					<el-carousel-item >
						<img src="@/assets/login/1-5.jpg" alt="图片">
					</el-carousel-item>
					<el-carousel-item >
						<img src="@/assets/login/1-6.jpg" alt="图片">
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="fr login-form-warpper">
				<div class="title-container">
					<h3 style="font-weight: 400;">美智医疗数据分析系统</h3>
					<span>Moziheathcare Data Analysis System</span>
				</div>

				<el-form
					ref="loginForm"
					:model="loginForm"
					:rules="loginRules"
					class="login-form"
					auto-complete="off"
					label-position="left"
				>
					<div v-if="showAlert" class="_alert" style="font-size:14px">账号或者密码不能为空</div>	
					<el-form-item prop="usrLogin" class="_login-form-item">
						<span class="_34956c">账号</span>
						<el-input
							v-model="loginForm.usrLogin"
							:placeholder="'请输入医生编码'"
							name="usrLogin"
							type="text"
							auto-complete="off"
						/>
					</el-form-item>

					<el-form-item prop="usrPwd" class="_login-form-item pr">
						<span class="_34956c">密码</span>
						<el-input
							:type="passwordType"
							v-model="loginForm.usrPwd"
							:placeholder="'请输入密码'"
							name="usrPwd"
							auto-complete="off"
							@keyup.enter.native="handleLogin"
						/>
						<img src="@/assets/login/3.png" class="show-pwd pa" @click="showPwd"/>
					</el-form-item>
					<el-form-item class="_login-form-item">
						<span class="_34956c"></span>
						<el-button
							:loading="loading"
							type="primary"
							style="width:100%;margin-bottom:30px;"
							@click.native.prevent="handleLogin"
							class="btn"
						>{{ '欢迎登录' }}</el-button>
					</el-form-item>
				</el-form>

				<div class="_flag">大数据应用让医疗工作更高效</div>
			</div>
		</div>
	</div>
</template>

<script>
// import { isvalidUsername } from '@/utils/validate'
import loginBg from '@/assets/login/loginbg.jpg'
export default {
	page: true,
	name: "login",
	__file: "src/views/login/index.vue",
	data() {
		const validateUsername = (rule, value, callback) => {
			callback();
		};
		const validatePassword = (rule, value, callback) => {
			if (value.length < 6) {
				// callback(new Error("密码不能少于6位"));
				callback();
			} else {
				callback();
			}
		};
		return {
			showAlert:false,
			imgList:[
				{url:'@/assets/login/1-1.jpg'},

			],
			loginBg: loginBg,
			loginForm: {
				usrLogin: "",
				usrPwd: ""
			},
			loginRules: {
				usrLogin: [
					{
						required: true,
						trigger: "blur",
						validator: validateUsername
					}
				],
				usrPwd: [
					{
						required: true,
						trigger: "blur",
						validator: validatePassword
					}
				]
			},
			passwordType: "password",
			loading: false,
			showDialog: false,
			redirect: undefined
		};
	},
	watch: {
		$route: {
			handler: function(route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true
		}
	},
	methods: {
		showPwd() {
			if (this.passwordType === "password") {
				this.passwordType = "text";
			} else {
				this.passwordType = "password";
			}
		},
		handleLogin() {
			if(!this.loginForm.usrLogin || !this.loginForm.usrPwd){
				this.showAlert = true;
				return 
			}else{
				this.showAlert = false;
			}
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.loading = true;
					this.$store
						.dispatch("LoginByUsername", this.loginForm)
						.then(() => {
							this.loading = false;
							this.$router.push({ path: this.redirect || "/" });
						})
						.catch(() => {
							this.loading = false;
						});
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		}
	},
	mounted() {
		// this.$store.dispatch('setLanguage', 'zh')
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-carousel__container {
	height: 600px !important;
}

.login-container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	.login-warpper {
		min-height: 630px;
		min-width: 1200px;
		box-shadow: #acabad 0px 0px 20px 7px
	}

	._banner {
		width: 64.4%;
		height: 100%;
		._carousel_warpper {
			height: 100%;
			.carousel__container {
			}
		}
	}
	.login-form-warpper {
		position: relative;
		height:630px;
		background: #fff;
		.el-form-item {
			margin-bottom: 32px;
		}
		width: 35.4%;
		.title-container {
			h3 {
				font-size: 24px;
			}
			span {
				font-size: 14px;
			}
			margin-top: 85px;
		}
		.login-form {
			margin-top: 89px;
			margin-right: 30px;
			.btn {
				background: #34956c;
				border-color: #34956c;
			}
			._login-form-item /deep/ .el-form-item__content {
				display: flex;
				justify-content: space-between;
				span {
					width: 12%;
				}
				.el-input,
				.el-button {
					width: 88% !important;
				}
			}
			._login-form-item /deep/.el-input__inner {
				border-color: #34956c;
			}
			._login-form-item /deep/ input::-webkit-input-placeholder {
				color: #b4d6c8;
			}
		}
		.show-pwd {
			width: 20px;
			height: 20px; 
			right:10px;
			top:50%;
			margin-top: -10px
		}
	}
}
._alert{
	color: #fff;
	padding: 15px;
    margin-bottom: 18px;
	margin-left:10px;
    border: 1px solid transparent;
    border-radius: 2px;
	background-color: rgba(244, 67, 54, 0.7);
    border-color: transparent;
}
._flag{
	position: absolute;
	bottom: 12px;
	right: 28px;
	font-size: 12px;
}
</style>